<template>
  <div class="withdrawal-box">
    <nav-bar title="收款设置" />
    <div class="withdrawal-tabs">
      <van-tabs v-model="active" @click="vanTabs">
        <van-tab title="微信">
          <div class="withdrawal-content">
            <div class="tupup-info-box">
              <!-- <div class="tupup-info bd-b">
              <div class="name">账户名</div>
              <div class="info">一个小小鸟</div>
            </div>
            <div class="tupup-info bd-b">
              <div class="name">联系方式</div>
              <div class="info">18956215474</div>
            </div> -->
              <j-input type="text" v-model="wechat.accountName" label="姓名" class="bd-b" placeholder="请输入姓名" />
              <j-input type="text" v-model="wechat.accountNo" label="账户" class="bd-b" placeholder="请输入微信账户" />
              <div class="tupup-info">
                <div class="info">
                  <div class="names">添加收款二维码</div>
                  <van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" />
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="支付宝">
          <div class="withdrawal-content">
            <div class="tupup-info-box">
              <j-input type="text" v-model="alipay.accountName" label="姓名" class="bd-b" placeholder="请输入姓名" />
              <j-input type="text" v-model="alipay.accountNo" label="账户" class="bd-b" placeholder="请输入支付宝账户" />
              <div class="tupup-info">
                <div class="info">
                  <div class="names">添加收款二维码</div>
                  <van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" />
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="银行卡">
          <div class="withdrawal-content">
            <div class="tupup-info-box">
              <j-input type="text" v-model="CardForm.accountName" label="持卡人姓名" class="bd-b" placeholder="持卡人姓名" />
              <j-input type="text" v-model="CardForm.accountNo" label="银行卡号" class="bd-b" placeholder="银行卡号" />
              <j-input type="text" v-model="CardForm.bankName" label="银行名称" class="bd-b" placeholder="银行名称" />
              <j-input type="text" v-model="CardForm.bankBranch" label="银行支行名称" class="bd-b" placeholder="银行支行名称" />
              <!-- <j-input type="textarea" v-model="CardForm.Note" label="备注" placeholder="备注"/> -->
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="setup-default-mode">
      <div class="name">{{active === 0 ? '微信' : active === 1 ? '支付宝' : '银行卡'}}设置默认方式：</div>
      <van-switch class="switch" v-model="checkedVal" size="20px" />
    </div>
    <div class="tupup-info-bottom">
      <j-botton type="danger" class="loginBtn" :disabled="isLoading" :loading="isLoading" loadingText='保存中'
        @click.native="saveWithdrawal">保存</j-botton>
    </div>
  </div>
</template>
<script>
export default {
  name: 'withdrawal-list',
  data() {
    return {
      mobileValue: '',
      checkedVal: false,
      active: 0,
      isLoading: false,
      fileList: [],
      wechat: {
        id: '',
        accountName: '',
        accountNo: '',
        accountImg: ''
      },
      alipay: {
        id: '',
        accountName: '',
        accountNo: '',
        accountImg: ''
      },
      CardForm: {
        id: '',
        accountName: '',
        accountNo: '',
        bankName: '',
        bankBranch: ''
        // Note: ''
      },
      setupId: null,
      SettingsInfo: {}
    };
  },
  created() {
    console.log(this.settingsInfo);
    this.getSettingsInfo(this.active + 1, this.settingsInfo);
  },
  mounted() {},
  methods: {
    afterRead(data) {
      var fileFormData = new FormData();
      fileFormData.append('file', data.file);
      this.$API.global.fileUpload(fileFormData).then(res => {
        if (res.code === 0) {
          this[!this.active ? 'wechat' : 'alipay'].accountImg = res.data.src;
          console.log(this.active);
          this.$toast('上传成功');
        }
      });
    },
    settingsInfo(data) {
      if (this.active === 0) {
        this.wechat = {
          accountName: (data && data.account_name) || '',
          accountNo: (data && data.account_no) || '',
          accountImg: (data && data.account_img) || ''
        };
      } else if (this.active === 1) {
        this.alipay = {
          accountName: (data && data.account_name) || '',
          accountNo: (data && data.account_no) || '',
          accountImg: (data && data.account_img) || ''
        };
      } else {
        this.CardForm = {
          accountName: (data && data.account_name) || '',
          accountNo: (data && data.account_no) || '',
          bankName: (data && data.bank_name) || '',
          bankBranch: (data && data.bank_branch) || ''
        };
      }
      if (data && data.account_img) {
        this.fileList = [{
          url: data.account_img
        }];
      }
      this.checkedVal = !!(data && data.is_default);
    },
    vanTabs(active) {
      this.fileList = [];
      this.getSettingsInfo(active + 1, this.settingsInfo);
    },
    getSettingsInfo(type, callbrak) {
      var options = {
        type: type
      };
      this.$API.user.getSettingsInfo(options).then(res => {
        if (res.code === 0) {
          this.setupId = (res.data && res.data.id) || '';
          this.SettingsInfo = res.data || {};
          callbrak && callbrak(res.data);
        }
      });
    },
    saveWithdrawal() {
      this.isLoading = true;
      var options = {
        type: Number(this.active + 1),
        isDefault: this.checkedVal ? 1 : 0
      };
      if (this.active === 0 || this.active === 1) {
        options.accountName = this.active === 0 ? this.wechat.accountName : this.alipay.accountName;
        options.accountNo = this.active === 0 ? this.wechat.accountNo : this.alipay.accountNo;
        options.accountImg = this.active === 0 ? this.wechat.accountImg : this.alipay.accountImg;
      } else {
        options.accountName = this.CardForm.accountName;
        options.accountNo = this.CardForm.accountNo;
        options.bankName = this.CardForm.bankName;
        options.bankBranch = this.CardForm.bankBranch;
      }
      // 判断是新增还是修改
      options.id = Number(this.setupId) || '';
      this.$API.user.settingsSave(options).then(res => {
        if (res.code === 0) {
          this.SettingsInfo = res.data || {};
          this.isLoading = false;
          this.$toast('保存成功');
          this.$store.dispatch('setSettingInfo');
          this.$router.go(-1);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .tupup-info-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 30px;
    background-color: #fff;
  }

  .tupup-info-box {
    // padding: 0 30px;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 10px;

    .j-field__label {
      font-size: 28px;
    }

    .tupup-info {
      display: flex;
      padding: 20px 25px 25px;
      font-size: 30px;

      .name {
        color: #212121;
        width: 150px;
        text-align: left;
        margin-right: 10px;
      }

      .info {
        flex: 1;
        color: #838383;

        .names {
          font-size: 28px;
          padding-bottom: 20px;
        }
      }
    }
  }

  .setup-default-mode {
    vertical-align: middle;
    font-size: 26px;
    padding: 10px 30px;
    color: #666;
    display: flex;
    justify-content: space-between;

    .name {
      color: #666;
    }

    .switch {
      display: flex;
      vertical-align: middle;
    }
  }

  .withdrawal-box {
    .withdrawal-tabs {
      margin-top: 20px;
    }

    .withdrawal-content {
      padding: 30px;
    }
  }
</style>
